<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/order.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单详情</h1>
		</header>

		<div class="mui-content" id="detail">
			<div class="payBox">
				<!--<div style="font-size: 28px;margin-top: 100px;">sdfsdffffds</div>-->
				<div class="payment" :class="{'red':payStatus===20}">
					<div v-if="payStatus===21&&status==11" style="margin-bottom: 10px;font-size: 18px;">买家关闭了订单</div>
					{{payment}}<span>元</span></div>
				<span v-if="payStatus===21">未付款</span>
				<span v-if="payStatus===20">已付款</span>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span class="recevicer">{{receivePerson}}{{receivePhone}}</span>
					<p class="address">{{address}}</p>
				</li>
				<li class="mui-table-view-cell">
					<img :src="goodsPictures|stringToArray" class="goods_img" />
					<span class="des">{{des | intercept}}</span>
				</li>
				<li class="mui-table-view-cell">
					<p>
						<span class="left">卖家昵称</span>
						<span class="right">{{userNickeName}}</span>
					</p>
					<p class="clearBoth">
						<span class="left">订单编号</span>
						<span class="right">{{orderNo}}</span>
					</p>
					<p class="clearBoth">
						<span class="left">交易时间</span>
						<span class="right">{{createTimeText}}</span>
					</p>
				</li>
			</ul>
		</div>
		<footer v-if="status==10" class="mui-bar mui-bar-tab" id="foot" id="foot">
			<button v-if="status==10" class="closeBtn" onclick="close_order()">关闭订单</button>
			<button v-if="payStatus ==21" class="payBtn" onclick="pay()">确认付款</button>
		</footer>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script src="../js/const.js"></script>
		<script type="text/javascript" src="../js/request.js"></script>
		<script type="text/javascript" src="../js/order_service.js"></script>
		<script type="text/javascript">
			mui.init();

			function getDefaultData() {
				return {
					id: '',
					goodsId: '',
					payment: '',
					status: '',
					receivePhone: '',
					address: '',
					receivePerson: '',
					userNickeName: '',
					orderNo: '',
					createTimeText: '',
					des: '',
					goodsPictures: '',
					payStatus: '',
					goods_img_path: GOODS_IMG_PATH + '/',
				}
			}
			Vue.filter("intercept", function(value) {
				return value.substring(0, 18);
			});
			Vue.filter("stringToArray", function(s) {
				var arr = s.split(",");
				arr =arr[0].replace(/\[|]/g,'');
				arr =arr.replace(/\"/g, "");
				return GOODS_IMG_PATH+'/'+arr;
			})

			var order_detail = new Vue({
				el: '#detail',
				data: getDefaultData(),
			});

			var foot = new Vue({
				el: '#foot',
				data: {
					payStatus: '',
					status: '',
				},
			});

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var order = self.order;
	
				order_detail.goodsPictures = order.goodsPictures;
				order_detail.userNickeName = order.nickName;
				order_detail.des =order.des;
				order_detail.address = order.address;
				order_detail.status = order.status;
				order_detail.receivePhone = order.receivePhone;
				order_detail.receivePerson = order.receivePerson;

				order_detail.createTimeText = order.createTimeText;
				order_detail.orderNo = order.orderNo;
				order_detail.payment = order.payment;
				order_detail.payStatus = order.payStatus;
				order_detail.id = order.id;
				order_detail.goodsId = order.goodsId;
				foot.payStatus = order.payStatus;
				foot.status = order.status;
				console.log(order_detail.address);

			});

			function pay() {
				var order = new Object();
				order.id = order_detail.id;
				order.goodsId = order_detail.goodsId;
				plus.nativeUI.showWaiting("正在支付...");
				var res = orderService.pay(order);
				plus.nativeUI.closeWaiting();
				if(res.resultCode == REQUEST_SUCCESS_CDOE) {
					plus.nativeUI.toast("支付成功。进入我的订单进行详情跟踪");
					var list = plus.webview.currentWebview().opener();
					mui.fire(list, 'goodsId', {
						id: order_detail.goodsId
					});
					mui.currentWebview.close();
				}

			}

			function close_order() {
				var order = new Object();
				order.id = order_detail.id;
				plus.nativeUI.showWaiting("正在关闭订单...");
				var res = orderService.close_order(order);
				plus.nativeUI.closeWaiting();
				if(res.resultCode == REQUEST_SUCCESS_CDOE) {
					plus.nativeUI.toast("订单关闭成功");
					var list = plus.webview.currentWebview().opener();
					mui.fire(list, 'goodsId', {
						id: order_detail.goodsId
					});
					mui.currentWebview.close();
				}

			}

		</script>
	</body>

</html>